<!-- 用户头像，集成popover弹框 class="custom-popover" -->
<template>
  <n-popover placement="right-start" trigger="click" :show-arrow="false">
    <template #trigger>
      <img :src="avatarUrl" :alt="userName" :width="props.width">
    </template>

    <user-info-popover :user-id="userId" />
  </n-popover>
</template>

<script setup>
import UserInfoPopover from "./userInfoPopover.vue";

const props = defineProps({
  // 头像宽度
  width: {
    type: Number,
    default: 36
  },
  // 用户id，默认为0，0表示自己
  userId: {
    type: Number,
    default: 0,
  }
})

import { mockList, myBasicInfo } from "@/views/chat/chatList/mockList.js";
import { onMounted, ref } from "vue";

const avatarUrl = ref('')
const userName = ref('')

onMounted(() => {
  if (props.userId === 0) {
    avatarUrl.value = myBasicInfo.avatar
    userName.value = myBasicInfo.name
  } else {
    const userInfo = mockList.find(item => item.id === props.userId)
    if(userInfo) {
      avatarUrl.value = userInfo.avatar
      userName.value = userInfo.name
    }
  }
})
</script>

<style scoped>

</style>
